<template>
	<div id="aa" style="margin: 1.875rem;">
		<!-- 每个元素的两侧间隔相等 -->
		<van-row justify="space-around" class="ids">
		  <van-col style="width:100%;margin: 10px;display: flex;justify-content: space-around;"><van-button round type="primary" v-for="(item,index) in list " :key="index" v-bind:zid= "zid" @click="goodsdetail(item.id)">{{item.name}}</van-button></van-col>
		</van-row>
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
		  <van-list
		    v-model:loading="loading"
		    :finished="finished"
		    finished-text="没有更多了"
		    @load="onLoad"
		  >
		 
		   
			 
			<van-col span="10">
					 <van-card 
					              v-for="item in sps"
					              title-class="sname"
					              price-class="price"
					              num-class="sell"
								  image-class="src"
					              custom-class="spms"
							      :url= "item.url"
					              :num="item.sell"
					              :price="item.price"
					              :title="item.sname"
					              
					              :thumb="item.src"  
								  @click="spxq(item.id)" 
					            >
					              
					
					            </van-card>
					
			</van-col>	
		  </van-list>
		</van-pull-refresh>
		<van-row justify="space-around">
		 	 
		</van-row>
	</div>
</template>

<script>
	import { ref } from 'vue';
	
	export default {
	  setup() {
		  const sps = ref([]);
    const loading = ref(true);
    const finished = ref(true);
	const list = [
		{
			id:9,
			name:'运动内衣'
		},
		{
			id:10,
			name:'瑜伽专属'
		},
		{
			id:11,
			name:'跑步'
		},
		{
			id:12,
			name:'训练'
		},
		
	]

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < sps.length; i++) {
          sps.value.push(sps.value.length + 1);
        }

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (sps.value.length >= sps.length) {
          finished.value = true;
        }
      }, 1000);
    };

    return {
      sps,
      onLoad,
      loading,
      finished,
	  list
    };
  },
  data() {
	  sps: [
		  {
			  sname:"",
			  price:"",
			  sell:"",
			  src:"",
			  id:''
		  }
	  ]
  },
  created(){
	  this.goodsdetail(1)
  },
  		  methods:{
  		  		  goodsdetail(id){
  		  			 this.axios.get("goods/selectallbytype?type="+id).then((res) => {
  		  			 			 if(res.data.code==200){
  		  			 			  this.sps=res.data.data
  		  						  this.list[0] = this.sps[0]
  		  						  console.log(this.sps[0])
  		  			 			 }else{
  		  			 				this.$toast({
  		  			 				  message: "亲，网络异常",
  		  			 				  
  		  							}) 
  		  						 }
  		  		  }
  		  		  
  		  )},
  go1(){
  			 this.axios.get("goods/selectallbysid?zid="+this.zid).then((res) => {
  			 			 if(res.data.code==200){
  			 				 this.$router.push("/znsb");
  							 this.$store.commit("znsb",res.data.data);
  			 			 }else{
  			 				this.$toast({
  			 				  message: "亲，网络异常",
  			 				  
  							}) 
  						 }
  		  }
  		  
  )},
  spxq(id){
  			 this.axios.get("goods/selectone?gid="+id).then((res) => {
				 
  			 			 if(res.data.code==200){
  			 				 // this.$router.push("/znsb");
							 this.$router.push({
								 path:"/goodsdetail",
								 query:{
									 id:id
								 }
							 })
  							 this.$store.commit("znsb",res.data.data);
							 
  			 			 }else{
  			 				this.$toast({
  			 				  message: "亲，网络异常",
  			 				  
  							}) 
  						 }
  		  }
  		  
  )}
  		  
  },
	  
	
	  
	  }
	
	
</script>

<style>
	.ids{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#aa{
		background-color: aqua;
	}
	 .goods-card {
	    margin: 0;
	    background-color: @white;
	  }
	
	  .delete-button {
	    height: 100%;
	  }
</style>

